<template>
	<div class="">
		<div class="tabs">
			<el-tabs
				v-model="activeName"
				@tab-click="handleClick"
				v-if="notEmpty(menus)">
				<el-tab-pane
					v-for="item in menus"
					:key="item.name"
					:label="item.name"
					:name="item.key"></el-tab-pane>
			</el-tabs>
		</div>
		<keep-alive>
			<component
				ref="C"
				:is="currentCom"
				v-model="infoData"
				:state="state"
				:type="type"
				:env="env"></component>
		</keep-alive>
	</div>
</template>

<script>
	import Details from '../chunk/details_approve/index.vue';
	import PayTable from '@/views/quota/apply/details/payTable/index.vue';
	import PriceSheet from '@/views/quota/apply/details/priceSheet/index.vue';
	import Profit from '@/views/quota/apply/details/profit/index.vue';
	import * as apis from '@/api/quota/forecast/edit/api.js';
	export default {
		name: 'ApplyDetails',
		components: { Details, PayTable, PriceSheet, Profit },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
				type: String,
			},
			env: {
				required: false,
				type: String,
			},
		},
		data() {
			return {
				activeName: 'first',
				loading: true,
				menus: [
					// {
					//     name: "内部报价详情",
					//     key: "first",
					//     com: "Details",
					// },
					// {
					//     name: "租金支付表",
					//     key: "second",
					//     com: "PayTable",
					// },
					// {
					//     name: "对外报价单",
					//     key: "third",
					//     com: "PriceSheet",
					// },
					// {
					//     name: "财务利润测算",
					//     key: "fourth",
					//     com: "Profit",
					// },
				],
			};
		},
		computed: {
			infoData: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			calcSchemeId() {
				return this.$route.query.calcSchemeId;
			},
			id() {
				return this.$route.query.processId;
			},

			currentCom() {
				let item = this.menus?.find(e => e.key == this.activeName);
				return item?.com;
			},
		},
		created() {
			this.menus.push({
				name: '内部报价详情',
				key: 'first',
				com: 'Details',
			});
			if (this.checkPermi(['quota:apply:detail:payTable'])) {
				this.menus.push({
					name: '租金支付表',
					key: 'second',
					com: 'PayTable',
				});
			}
			if (this.checkPermi(['quota:apply:detail:priceSheet'])) {
				this.menus.push({
					name: '对外报价单',
					key: 'third',
					com: 'PriceSheet',
				});
			}
			if (this.checkPermi(['quota:apply:detail:profit'])) {
				this.menus.push({
					name: '财务利润测算',
					key: 'fourth',
					com: 'Profit',
				});
			}
			// if (this.calcSchemeId) {
			//     this.getDetails(this.calcSchemeId);
			// } else {
			//     this.initData();
			//     this.loading = false;
			// }
		},
		mounted() {},
		methods: {
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
			flow_submit() {
				console.log('flow_submit');
				this.$emitter.emit('setchangeState');
			},
			handleClick() {},
			initData() {
				this.infoData = {
					productList: [
						{
							plan: {},
							insuranceList: [],
							maintenanceList: [],
							attachedDecorationList: [],
							feeList: [],
						},
					],
				};
			},
			getDetails(calcSchemeId) {
				apis?.Details(calcSchemeId)
					.then(res => {
						if (res.code == 200) {
							this.infoData = res.data;
							this.infoData?.productList?.forEach(product => {
								try {
									if (this.notEmpty(product?.calcSnapshoot)) {
										product.calcSnapshoot = JSON.parse(
											product.calcSnapshoot,
										);
									}
								} catch (error) {
									console.warn(error);
								}
							});
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tabs {
		margin: 20px;
		padding: 5px 20px 0;
		background-color: #fff;
		border-radius: 8px;
		margin-top: 0;
	}
	.containerBox {
		min-height: calc(100vh - 220px);
		display: flex;
	}
	.content_tabs123 {
		flex: 1;
		min-width: 0;
	}
</style>
